<template>
  <div
    v-show="imgReview.visible"
    class="img-review-wrapper"
    @click.self="closeImgReview"
  >
    <img v-if="imgReview.fileUrl" ref="rotate" class="img-large" :src="imageUrl" alt>
    <div v-if="imgReview.fileUrl" class="opera-btn-group">
      <a
        class="download-link"
        target="_blank"
        :href="downloadUrl"
      >
        <i class="opera-icon el-icon-download" title="保存到本地" />
      </a>
      <i v-if="imgReview.fileUrlArray.length > 0" class="opera-icon el-icon-back" title="前一个" @click="handlePre" />
      <i class="opera-icon el-icon-refresh-right" title="向右旋转" @click="rotateImg" />
      <i class="opera-icon el-icon-aim" title="恢复" @click="restore" />
      <i class="opera-icon el-icon-zoom-in" title="放大" @click="zoomIn" />
      <i class="opera-icon el-icon-zoom-out" title="缩小" @click="zoomOut" />
      <i v-if="imgReview.fileUrlArray.length > 0" class="opera-icon el-icon-right" title="后一个" @click="handleNext" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImgReview',
  props: {
    imgReview: {
      type: Object,
      default: () => {
        return {
          fileUrl: undefined,
          fileUrlArray: [],
          current: 0,
          downloadType: 'fileId',
          visible: false
        }
      }
    }
  },
  data() {
    return {
      rotate: 0,
      zoomX: 1,
      zoomY: 1
    }
  },
  computed: {
    imageUrl: function() {
      if (this.imgReview.fileUrl && this.imgReview.fileUrl !== '') {
        if (this.imgReview.downloadType === 'fileId') {
          return this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/preview/` + this.imgReview.fileUrl
        } else {
          return this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/preview?path=` + this.imgReview.fileUrl
        }
      }
      return ''
    },
    downloadUrl: function() {
      if (this.imgReview.fileUrl && this.imgReview.fileUrl !== '') {
        if (this.imgReview.downloadType === 'fileId') {
          return this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/download/` + this.imgReview.fileUrl
        } else {
          return this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/download?path=` + this.imgReview.fileUrl
        }
      }
      return ''
    }
  },
  methods: {
    //  关闭图片预览
    closeImgReview() {
      this.$emit('getImgReviewData', null, false)
      this.rotate = 0
      this.zoomX = 1
      this.zoomY = 1
      this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
    },
    //  旋转图片
    rotateImg() {
      this.rotate += 45
      this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
    },
    //  重置图片
    restore() {
      this.rotate = 0
      this.zoomX = 1
      this.zoomY = 1
      this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
    },
    //  放大图片
    zoomIn() {
      this.zoomX += 0.2
      this.zoomY += 0.2
      this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
    },
    //  缩小图片
    zoomOut() {
      if (this.zoomX > 0.3) {
        this.zoomX -= 0.2
        this.zoomY -= 0.2
        this.$refs.rotate.style.transform = `rotate(${this.rotate}deg) scale(${this.zoomX}, ${this.zoomY})`
      }
    },
    handlePre() {
      if (this.imgReview.current === 0) {
        this.$modal.msgWarning('没有前一张图片了')
        return
      }
      this.imgReview.current = this.imgReview.current - 1
      this.imgReview.fileUrl = this.imgReview.fileUrlArray[this.imgReview.current]
    },
    handleNext() {
      if (this.imgReview.current === this.imgReview.fileUrlArray.length) {
        this.$modal.msgWarning('没有后一张图片了')
        return
      }
      this.imgReview.current = this.imgReview.current + 1
      this.imgReview.fileUrl = this.imgReview.fileUrlArray[this.imgReview.current]
    }
  }
}
</script>

<style lang="scss" scoped>
.img-review-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  z-index: 4000;
  text-align: center;
  display: flex;
  align-items: center;
  animation: imgReviewAnimation 0.3s;
  -webkit-animation: imgReviewAnimation 0.3s; /* Safari and Chrome */
  animation-iteration-count: 0.3;
  -webkit-animation-iteration-count: 0.3;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
  @keyframes imgReviewAnimation {
    0% {
      background: transparent;
    }
    100% {
      background: rgba(0, 0, 0, 0.8)
    }
  }
  @keyframes imgReviewAnimation {
    0% {
      background: transparent;
    }
    100% {
      background: rgba(0, 0, 0, 0.8);
    }
  }
  .img-large {
    margin: 0 auto;
    max-width: 80%;
    max-height: 80%;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s; /* Safari */
  }
  .opera-btn-group {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    right: 0;
    bottom: 20px;
    left: 0;
    margin: 0 auto;
    border-radius: 6px;
    width: 600px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    .download-link {
      color: inherit;
    }
    .opera-icon {
      margin: 0 10px;
    }
  }
}
</style>
